<template>
    <div>
        <div class="box">
            <div class="box-title">
                {{ data.roomName }}
            </div>
            <div class="tabs">
                <div class="tabs-flex">
                    <div>
                        <el-image
                            :src="require('@/assets/scene/temperature.png')"
                            fit="fill"
                        ></el-image>
                    </div>
                    <div>{{ data.temperature }} ℃</div>
                </div>
                <div>
                    <div class="tabs-flex">
                        <div>
                            <el-image
                                :src="require('@/assets/scene/humidness.png')"
                                fit="fill"
                            ></el-image>
                        </div>
                        <div>{{ data.humidity }} %</div>
                    </div>
                </div>
                <div>
                    <div class="tabs-flex">
                        <!-- <div class="el-image"></div> -->
                        <div>NH3：正常</div>
                    </div>
                </div>
                <div>
                    <div class="tabs-flex">
                        <!-- <div class="el-image"></div> -->
                        <div>N2S：正常</div>
                    </div>
                </div>
            </div>
            <!-- <div v-show="data.type === 1" style="height: 50px"></div> -->
            <div class="bottom-warp">
                <div
                    v-for="(item, index) in data.subData"
                    :key="index"
                    class="bottom-box"
                    :style="{
                        'background-color':
                            item.attrValue === '1' ? '#fff' : '',
                    }"
                >
                    <div class="bottom-box-img" v-show="index === 0">
                        <div>
                            <el-image
                                :src="require('@/assets/scene/secure.png')"
                                fit="fill"
                            ></el-image>
                        </div>
                        <div>
                            <el-image
                                :src="require('@/assets/scene/RedHorn.png')"
                                fit="fill"
                                v-if="item.attrValue === '1'"
                            ></el-image>
                            <el-image
                                :src="require('@/assets/scene/close.png')"
                                fit="fill"
                                v-else
                            ></el-image>
                        </div>
                    </div>
                    <el-image
                        v-show="index > 0"
                        :src="item.img"
                        fit="fill"
                    ></el-image>
                    <div
                        style="
                            font-size: 12px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        "
                    >
                        {{ item.devName }}
                    </div>
                    <!-- <div
                        class="bottom-box-close"
                        :style="{
                            color: item.attrValue === '1' ? '#ed4545' : '',
                        }"
                    >
                        {{ item.attrValue === "1" ? "18:41有人经过" : "关闭" }}
                    </div> -->
                    <div
                        class="bottom-box-close"
                        v-if="item.attrValue === '1'"
                        style="color: #ed4545"
                    >
                        {{ dayjs(item.updateTime).format("HH:mm:ss") }}有人经过
                    </div>
                    <div class="bottom-box-close" v-else>关闭</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "toiletItem",
    props: {
        data: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            bottomDta: [],
        };
    },
    created() {},
    mounted() {},
    methods: {},
};
</script>
<style lang="scss" scoped>
.box {
    background: linear-gradient(to right, #5dd18a, #64cdaf, #6fccd1);
    border-radius: 10px;
    padding: 10px;
    &-title {
        color: #fff;
        font-size: 18px;
    }
    .tabs {
        margin: 15px 0;
        display: flex;
        align-items: center;
        gap: 15px;
        color: #fff;
        .tabs-flex {
            display: flex;
            align-items: center;
            // gap: 15px;
            font-size: 12px;
            .el-image {
                width: 20px;
                height: 20px;
            }
        }
    }
    .bottom-warp {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
        grid-gap: 10px; /* 列间距 */
        // grid-column-gap: 30px;
        .bottom-box {
            // height: 40px;
            background-color: #bddccd;
            border-radius: 10px;
            padding: 5px;
            font-size: 14px;
            line-height: 1.5;
            color: #000;
            .el-image {
                width: 14px;
                height: 14px;
            }
            &-img {
                display: flex;
                justify-content: space-between;
            }
            &-close {
                font-size: 12px;
                color: #a8bab0;
            }
        }
    }
}
</style>
